<template>
    <button
        :class="classes"
        @click="$emit('click')">
        <span v-if="$slots.default" class="hr-button-content">
            <slot>def</slot>
        </span>
    </button>
</template>

<script>

    export default {
        name: "HrButton",
        props: {
            type: {
                type: String,
                default: 'primary',
                validator(type) {
                    return ['primary', 'warning', 'danger', 'info', 'success'].indexOf(type) > -1
                }
            }
        },
        computed: {
            classes() {
                return [
                    'hr-button',
                    { [`hr-button-icon-${this.iconPosition}`]: true, },
                    `hr-button-${this.type}`
                ]
            }
        }
    }
</script>

<style scoped lang="scss">
    .hr-button {
        @include hvFlexCenterMx(inline-flex);
        padding: $--button-padding;
        height: $--height-base;
        color: $--button-color;
        border: none;
        outline: none;
        border-radius: $--button-border-radius;
        background: $--button-default-fill;
        font-size: $--button-font-size;
        vertical-align: middle;
        transition: all .3s;
        &:hover {
            box-shadow: 0px 0px 2px 3px rgba(255, 255, 255, 1);
        }
        &:active {
            backface-visibility: hidden;
            transform: $--pressed-scale;
        }

        // Icon
        &-icon { height: 1em; width: 1em; order: 1}
        // Content
        &-content { order: 2; margin: 0 4px;}

        // Right position
        &-icon-right {
            > .hr-button-content { order: 1; }
            > .hr-button-icon { order: 2; }
        }

        // Types
        &-primary { background: $--button-primary-fill; }
        &-success { background: $--button-success-fill; }
        &-danger { background: $--button-danger-fill; }
        &-warning { background: $--button-warning-fill; }
        &-info { background: $--button-info-fill; }

        & + & {
            margin-left: 4px;
        }
    }
</style>
